import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import Avatar from '@/components/Avatar'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './info.module.scss'
import { dateFormat } from '@/utils'
class LotteryInfo extends PureComponent {
    static propTypes = {
        info: PropTypes.object
    }

    get hasInfo() {
        return !!this.props.info
    }

    get card() {
        let data = null
        if (this.hasInfo) {
            data = JSON.parse(this.props.info.card)
        }
        return data
    }

    get createTime() {
        let time = null
        if (this.card) {
            const item = this.card.item
            const rawTime = item.upload_time || item.timestamp
            time = dateFormat(new Date(rawTime*1000), 'yyyy年MM月dd日 hh:mm')
        }
        return time
    }

    get description() {
        let data = null
        if (this.card) {
            data = this.card.item.description || this.card.item.content
        }
        return data
    }

    get cover() {
        let data = null
        if (this.card) {
            const arr = this.card.item.pictures
            data = Array.isArray(arr) && arr.length > 0 ? arr[0].img_src : ''
        }
        return data
    }

    get user() {
        return this.props?.info?.desc?.user_profile ?? null
    }

    handleSpace = id => {
        this.props.history.push(`/space/${id}`)
    }

    render() {        
        if (!this.hasInfo) {
            return null
        } else {
            const user = this.user
            return (
                <div className={css["wrap"]}>
                    {   
                        user && <div className="head">
                            <Avatar 
                                className="avatar"
                                src={user.info.face+'@80w_80h_1c'} 
                                size="small"
                                onClick={() => this.handleSpace(user.info.uid)}
                            />
                            <span className="name" onClick={() => this.handleSpace(user.info.uid)}>{user.info.uname}</span>
                            <span className="time">{this.createTime}</span>
                        </div>
                    }
                    <div className="body">
                        {   
                            this.cover && 
                            <div className="cover">
                                <ResponsiveImage className="cover-img" src={this.cover} size="@160w_160h_1c" />
                            </div>
                        }
                        <div className="content">{this.description}</div>
                    </div>
                </div>
            )
        }        
    }
}
export default withRouter(LotteryInfo)